<template>
    <div class="detailed-box">
        <add-park-dialog :visible="isAddedPark" @callClosed="handleAddParkDialogClosed" @callSaveSuccess="handleParkSaveSuccess"/>
        <add-to-dialog :visible="addToDialogVisible" :lat="selectedItem.lat" :lng="selectedItem.lng"
            :cityCode="queryParams.cityCode" :local="selectedItem.local" @calledClosing="closeAddToDialogHandle" />
        <div class="dialog-box">
            <el-dialog title="继续投放" width="30%" :visible.sync="dialogFormVisible" :append-to-body="true">
                <div class="info">
                    <span class="add-info">地标点:</span><span class="info-area" style="margin-left: 27px;">{{
            selectedItem.local }}</span>
                </div>
                <div class="info id-box">
                    <span class="add-id">单车编号:</span>
                    <el-input style="width: 80%;margin-left: 15px;" v-model="bycicleId" placeholder="输入单车编号"></el-input>
                </div>
                <div class="info id-box" style="display: flex; justify-content: flex-start;">
                    <span class="add-id">最大里程数:</span>
                    <el-input style="width: 30%;margin-left: 15px;" v-model="bikeInfo.mileage"
                        placeholder="输入最大里程数(KM)"></el-input>
                    <span class="add-id" style="margin-left: 10px;">电量:</span>
                    <el-input style="width: 30%;margin-left: 15px;" v-model="bikeInfo.power"
                        placeholder="输入单车电量"></el-input>
                </div>

                <div class="info">
                    <span class="add-type">单车类型:</span>
                    <el-button-group style="margin-left: 15px;">
                        <el-button type="primary" @click="power = false" plain>自行车</el-button>
                        <el-button type="primary" @click="power = true" plain>助力车</el-button>
                    </el-button-group>
                </div>
                <div class="info" style="display: flex; justify-content: center; ">
                    <el-button style="width: 50%;" type="primary"
                        @click="resub(selectedItem.platform, selectedItem.local, selectedItem.lat, selectedItem.lng, bycicleId, bikeInfo.mileage, bikeInfo.power)">投放</el-button>
                </div>
            </el-dialog>
        </div>

        <div class="title-box">
            <div class="title">
                <span>详细信息</span>
            </div>
            <div class="add-btn-detailed">
                <el-button type="primary" @click="isAddedPark = true">创建新的投放点</el-button>
            </div>
        </div>
        <div class="detailed-body-box">
            <el-row>
                <el-col :span="3.5">
                    <div class="sel-box">
                        <el-cascader :options="options" v-model="selectedOptions"></el-cascader>
                    </div>
                </el-col>
                <el-col :span="20">
                    <div class="sel-input-box">
                        <el-input placeholder="输入你要查询的停放点信息" v-model="queryParams.address" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="query"></el-button>
                        </el-input>
                    </div>
                </el-col>
            </el-row>
            <br>
            <div class="list-data-detailed-box">
                <el-table :data="tableData" style="width: 100%" height="650">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <div class="main-info-block">
                                <div class="info-block">
                                    <div class="list-plateform-bycicle">
                                        <span class="info-title">单车停放点信息</span>
                                        <div class="list-item" v-for="(item, index) in props.row.platform" :key="index">
                                            <el-card class="info-card">
                                                <el-row>
                                                    <el-col :span="18">
                                                        <div class="info">
                                                            <span>创建单位:{{ item['name'] }}</span>
                                                        </div>

                                                        <div class="info">
                                                            <span>地标点:{{ props.row.name }}</span>
                                                        </div>
                                                    </el-col>
                                                    <el-col :span="6">
                                                        <div class="info">
                                                            <span>投放数量:{{ item['count'] }}</span>
                                                        </div>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-button style="width: 100%;" type="primary" plain
                                                        @click="handlerAddDialog(item, props)">继续投放</el-button>
                                                </el-row>
                                            </el-card>
                                        </div>
                                    </div>
                                </div>
                                <div class="map">
                                    <div class="map-box">
                                        <baidu-map class="map" style="width: 100%;" :scroll-wheel-zoom="true"
                                            :center="{ lat: props.row.lat, lng: props.row.lng }" :zoom="18">
                                            <bm-marker :position="{ lat: props.row.lat, lng: props.row.lng }"
                                                :dragging="props.row.level === '1'" @dragend="savingNewLocation"
                                                :icon="{ url: bikeIcon, size: { width: 40, height: 50 } }">
                                            </bm-marker>
                                        </baidu-map>
                                    </div>
                                    <div class="handler-box">
                                        <el-button type="primary" @click="handlerMoving(props)">
                                            {{ props.row.level === '1' ? '保存' : '移动坐标点' }}
                                        </el-button>
                                        <el-button type="danger"
                                            @click="handlerDelArea(props.row.platfrom)">删除区域</el-button>
                                    </div>
                                </div>
                            </div>
                            <el-button
                                @click="showAddToDialog(props.row.name, props.row.lat, props.row.lng)">追加投放</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="地点" prop="name">
                    </el-table-column>
                    <el-table-column label="投放数" prop="count">
                    </el-table-column>

                </el-table>
            </div>
        </div>
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="queryParams.page"
            :page-size="queryParams.limit" layout="total, prev, pager, next" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import API from "@/utils/request"
import AddToDialog from '@/components/dialog/AddToDialog.vue';
import { regionData } from 'element-china-area-data'
import AddParkDialog from '@/components/dialog/AddParkDialog.vue';

export default {
    components: { AddToDialog, AddParkDialog },
    data() {
        return {
            options: regionData,
            selectedOptions: [],
            dialogFormVisible: false,
            power: false,
            isAddedPark: false,
            bikeIcon: require('@/assets/img/icon/icon_bycicle_park.png'),
            bycicleId: '',
            bikeInfo: {
                mileage: "",
                power: ""
            },
            movingPoint: {},
            queryParams: {
                address: '',
                cityCode: "320412",
                page: 1,
                limit: 12
            },
            total: 0,
            selectedItem: {
                local: '',
                lat: '0.0',
                lng: '0.0',
                platform: ""
            },
            tableData: [],
            addToDialogVisible: false,
            localInfo: ''
        }
    },
    methods: {
        handlerMoving(data) {
            if (data.row.level === '0') {
                data.row.level = '1'
            } else {
                if (this.movingPoint.lat !== undefined) {
                    var reqData = {
                        parkName: data.row.name,
                        lat: this.movingPoint.lat,
                        lng: this.movingPoint.lng
                    }
                    //TODO:保存新的坐标值
                    API.updateParkPoint(reqData, ((res) => {
                        if (res.code === 200) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '网路不佳，请稍后再试',
                                type: 'error'
                            });
                        }
                    }));
                }
                data.row.level = '0'
            }
        },
        showAddToDialog(local, lat, lng) {
            console.log("点击了 " + local);
            this.addToDialogVisible = true;
            this.selectedItem.local = local;
            this.selectedItem.lat = lat;
            this.selectedItem.lng = lng;
        },
        handleAddParkDialogClosed(){
          this.isAddedPark = false;
        },
        handleParkSaveSuccess(){
          this.isAddedPark = false;
          this.loadDataHandler();
        },
        loadDataHandler() {
            API.getParksBylimit(this.queryParams, ((res) => {
                this.tableData = res;
            }));
            //加载数据
            // Aixos
            API.getParkCount(this.queryParams, ((res) => {
                this.total = parseInt(res.count);
            }));
        },
        closeAddToDialogHandle() {
            this.addToDialogVisible = false;
            console.log("已经关闭");
        },
        handleSizeChange() {

        },
        handleCurrentChange() {
            API.getParksBylimit(this.queryParams, ((res) => {
                this.tableData = res;
            }));
        },
        handleAddEdit(data) {
            console.log('新增单车区域:');
            console.log(data);
        },
        handlerAddDialog(data, props) {
            //继续投放单车
            this.selectedItem.lat = props.row.lat;
            this.selectedItem.lng = props.row.lng;
            this.selectedItem.local = props.row.name;
            this.selectedItem.platform = data["name"];
            this.dialogFormVisible = true;
        },
        handlerChangeArea(data) {
            console.log('重新绘制单车区域:');
            console.log(data);
        },
        handlerDelArea(data) {
            console.log('删除单车区域:');
            console.log(data);
        },
        resub(platform, local, lat, lng, id, mileage, power) {
            var req = {
                "bikeMode": this.power ? "1" : "2",
                "platform": platform,
                "lat": lat,
                "lng": lng,
                "bikeId": id,
                "cityCode": this.queryParams.cityCode,
                "mileage": mileage,
                "power": power,
                "parkName": local,
                "pic": 'http://mallfile.oss-cn-shanghai.aliyuncs.com/fault/kf/2023-10-11/Y3.png'
            };
            console.log(req);
            API.addBike(req, ((res) => {
                console.log(res);
                if (res.code === 200) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.dialogFormVisible = false;
                }
                else {
                    this.$message({
                        message: res.data,
                        type: 'error'
                    })
                    this.dialogFormVisible = false;
                }
            }));
        },
        query() {
            if (this.selectedOptions.length === 1)
                this.queryParams.cityCode = this.selectedOptions[0];
            if (this.selectedOptions.length === 2)
                this.queryParams.cityCode = this.selectedOptions[1];
            if (this.selectedOptions.length === 3)
                this.queryParams.cityCode = this.selectedOptions[2];

            API.getParksBylimit(this.queryParams, ((res) => {
                this.tableData = res;
            }));
            API.getParkCount(this.queryParams, ((res) => {
                this.total = parseInt(res.count);
            }));
            console.log(this.selectedOptions);
        },
        //存储新的拖拽坐标
        savingNewLocation(data) {
            console.log(data.point);
            this.movingPoint = data.point;
        }

    },
    mounted() {
        this.loadDataHandler(this.selectedOptions);
    }
}
</script>

<style scoped>
.id-box {
    display: flex;

}

.title-box {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-top: 10px;
}

.handler-box {
    display: inline-flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
}

.info-title {
    font-weight: bold;
    color: #333537;
}

.info {
    line-height: 30px;
    margin-bottom: 20px;
}

.info-card {
    width: 500px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 10px;
}

.map-box {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #ebeef5;
    background-color: #99a9bf;
}

.map {
    width: 50%;
    height: 200px;

}

.main-info-block {
    display: flex;
    justify-content: space-between;
    height: 250px;
}

.info-block {
    overflow-x: hidden;
    overflow-y: scroll;
}

.title {
    position: relative;
    font-weight: bold;
    margin-left: 10px;
}

.add-btn-detailed {
    margin-right: 10px;
}

.sel-box {
    position: relative;
    width: auto;

    display: inline-block;
    float: none;

    margin-right: 10px;
    margin-left: 10px;
}

.detailed-box {
    width: 100%;
    overflow: auto;
}

.list-data-detailed-box {
    overflow-x: hidden;
    overflow-y: scroll;
}

.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>